<template>
  <div class="card-wrapper">
      <BaseFilter :config="filterOptions" @mychange="setFilterData" />
      <div class="table-container">
          <BaseTable
            :columns="tableColumns"
            :tableData="getTableData()"
          >
            <template #header>
                <div class="operate-btn">
                    <el-button type="primary" @click="this.showDialog = true">添加卡号</el-button>
                    <el-button >查询</el-button>
                    <el-button >重置</el-button>
                </div>
            </template>
          </BaseTable>
      </div>
        <el-dialog title="添加新的卡号" v-model="showDialog">
            <el-form :label-position="right" label-width="80px" :model="formCard" class="card-form" ref="cardForm">
                <el-form-item label="卡号头部"
                    :rules="[
                        { required: true, message: '内容不能为空'},
                    ]"
                    prop="card_header"
                >
                    <el-input v-model="formCard.card_header" style="width: 320px;"></el-input>
                </el-form-item>
                <el-form-item label="卡类型"
                    :rules="[
                        { required: true, message: '内容不能为空'},
                    ]"
                    prop="card_type"
                >
                    <el-select v-model="formCard.card_type" placeholder="请选择" style="width: 320px;">
                        <el-option label="实体卡" value="实体卡"></el-option>
                        <el-option label="虚拟卡" value="虚拟卡"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="卡归属"
                    :rules="[
                        { required: true, message: '内容不能为空'},
                    ]"
                    prop="affiliation"
                >
                    <el-select v-model="formCard.affiliation" placeholder="请选择" style="width: 320px;">
                        <el-option label="大客户" value="大客户"></el-option>
                        <el-option label="合伙人" value="合伙人"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showDialog = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </div>
        </el-dialog>
  </div>
</template>

<script>
import BaseFilter from "@/components/BaseFilter.vue";
import BaseTable from "@/components/BaseTable.vue";
import { findCardNumber, addCardNumber } from "@/api/card";
export default {
    name: "card",
    components: {
        BaseFilter,
        BaseTable
    },
    data(){
        return {
            date: null,
            filterOptions: [
                {
                    label: "卡号头部",
                    key: "card",
                    type: "text",
                    props: {
                        placeholder: "按卡号头部查询"
                    },
                },
                {
                    label: "归属",
                    key: "reply",
                    type: "radio",
                    options: [
                        {
                            label: "大客户",
                            value: "大客户"
                        },
                        {
                            label: "代理",
                            value: "合伙人"
                        }
                    ]
                }
            ],
            
            filterData: {},
            tableColumns: [
                {
                    title: "ID",
                    key: "id",
                },
                {
                    title: "卡号头部",
                    key: "card_header",
                },
                {
                    title: "卡类型",
                    key: "card_type",
                },
                {
                    title: "归属",
                    key: "affiliation"
                },
                {
                    title: "操作",
                    key: "operate",
                    operate: [
                        {
                            tag: "el-button",
                            text: "编辑",
                            click: (...props) => {console.log(props)},
                            props: {
                                type: "primary"
                            }
                        },
                        {
                            tag: "el-button",
                            text: "删除",
                            click: (...props) => {console.log(props)},
                            props: {
                                type: "danger"
                            }
                        }
                    ]
                }
            ],
            tableData: [],
            showDialog: false,
            formCard: {
                card_header: undefined,
                card_type: undefined,
                affiliation: undefined
            }
        }
    },
    methods: {
        setFilterData(values){
            this.filterData = values
        },
        getTableData(){
            const { card, reply } = this.filterData;
            let data = this.tableData;
            if(card){
                data = data.filter(item => item.card_header?.includes(card));
            }
            if(reply){
                data = data.filter(item => item.affiliation == reply);
            }
            return data;
        },
        onSubmit(){
            this.$refs["cardForm"].validate((valid) => {
                if (valid) {
                    const formData = new FormData();
                    Object.keys(this.filterData).forEach(key => {
                        formData.append(key, this.filterData[key])
                    })
                    addCardNumber(formData).then(res => {
                        console.log(res)
                    })
                } else {
                    return false;
                }
            });
        }
    },
    mounted(){
        findCardNumber().then(res => {
            if(res.code === 200){
                this.tableData = res?.data;
            }
        }).catch(err => {
            this.$message.error("加载数据失败")
        })
    }
}
</script>

<style lang="scss">
.card-wrapper {
    width: 100%;
    height: 100%;
    background-color: #FFF;
    padding: 16px 24px;
    box-sizing: border-box;
    .table-container {
        margin-top: 20px;
        .operate-btn {
            height: 45px;
        }
    }
    .card-form {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .dialog-footer {
        display: flex;
        justify-content: flex-end;
    }
}
</style>